<template>
<!-- 用户明细 -->
  <div class="morning-container">
    <van-loading v-if="isLoading" type="spinner" color="#1989fa" />
    <div v-else>
      <div v-if="isJf()">
        <div v-if="type == 'jf2i'" class="morning-users-list">
          <div class="users-list-item" v-for="item in list" :key="item.DEVICE_NUMBER">
            <div class="info-detail">
              <span class="info-phone">{{ item.DEVICE_NUMBER }}</span>
              <span v-show="item.ACCEPT_DATE" class="info-time">{{ item.ACCEPT_DATE }}</span>
            </div>
            <div class="info-desc" style="margin-bottom:4px">产品：{{ item.PRODUCT_NAME }}</div>
            <div class="info-desc">套餐费：<span class="item-value">￥{{ item.DINNER_FEE }}</span></div>
          </div>
        </div>
        <div v-else class="morning-users-list">
          <div class="users-list-item zxy" v-for="item in list" :key="item.TRADE_ID">
            <img class="img-user" src="~@/assets/imgs/publicline/board/icon-users.png" />
            <div class="info-tc">
              <div class="info-desc">工单处理人：{{ item.LOGIN_NAME }}</div>
              <div class="info-desc">订单号：{{ item.TRADE_ID }}</div>
              <div class="info-desc">竣工时间：{{ item.REPAIR_TIME }}</div>
              <div class="info-desc">装机地址：{{ item.INS_ADDR }}</div>
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <div v-for="item in list" :key="item.LEVEL_NAME">
          <div class="morning-users-img">
            <img src="~@/assets/imgs/publicline/board/icon-users-group.png" />
            <span class="title">{{ item.LEVEL_NAME }}</span>
          </div>
          <div class="morning-users-list">
            <div class="users-list-item" v-for="child in item.dataInfo" :key="child.DEVICE_NUMBER">
              <div class="info-detail">
                <span class="info-phone">{{ child.DEVICE_NUMBER }}</span>
                <span v-show="child.ACCEPT_DATE" class="info-time">{{ child.ACCEPT_DATE }}</span>
              </div>
              <div class="info-desc" style="margin-bottom:4px">产品：{{ child.PRODUCT_NAME }}</div>
              <div class="info-desc">套餐费：<span class="item-value">￥{{ child.DINNER_FEE }}</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  daygsm, daykd, dayrh, dayyqt, daygsm5g, dayqz, daygh,
  dayqz5g, daysjb5g, daykdtsb, daykdxy, daytcsd,
  daywjgh, daywjzw, daywjsy, dayiptv,
  dayyj, dayzj, dayxz, dayjf2i
} from '@/api/publicline/board.js'

export default {
  components: { },
  data() {
    return {
      isLoading: true,
      list: [],
      dayId: '',
      levelName: '',
      type: '',
      urlPath: {
        gsm: daygsm,
        kd: daykd,
        rh: dayrh,
        yqt: dayyqt,
        gsm5g: daygsm5g,
        qz: dayqz,
        gh: daygh,
        qz5g: dayqz5g,
        sjb5g: daysjb5g,
        kdtsb: daykdtsb,
        kdxy: daykdxy,
        tcsd: daytcsd,
        wjgh: daywjgh,
        wjzw: daywjzw,
        wjsy: daywjsy,
        iptv: dayiptv,
        yj: dayyj,
        zj: dayzj,
        xz: dayxz,
        jf2i: dayjf2i,
      }
    }
  },
  created() {
    this.dayId = this.$route.query.dayId
    this.levelName = this.$route.query.id
    this.type = this.$route.query.type
  },
  mounted() {
    this.getUserDetail()
  },
  methods: {
    async getUserDetail() {
      this.isLoading = true
      const res = await this.urlPath[this.type]({ levelName: this.levelName, dayId: this.dayId })
      const { result, success } = res
      if (success) {
        // 交付单独处理
        if(this.isJf()) {
          this.list = result
        } else {
          this.reflowData(result)
        }
        this.isLoading = false
      }
    },
    isJf() {
      const merge = ['yj', 'zj', 'xz', 'jf2i']
      return merge.includes(this.type)
    },
    reflowData(arr) {
      let tempArr = []
      let Data = []    //最终数组
      for (let i = 0; i < arr.length; i++) {
        if (tempArr.indexOf(arr[i].LEVEL_NAME) === -1) {
          Data.push({
            LEVEL_NAME: arr[i].LEVEL_NAME,
            dataInfo: [arr[i]]
          })
          tempArr.push(arr[i].LEVEL_NAME)
        } else {
          for (let j = 0; j < Data.length; j++) {
            if (Data[j].LEVEL_NAME == arr[i].LEVEL_NAME) {
              Data[j].dataInfo.push(arr[i])
              break
            }
          }
        }
      }
      this.list = Data
    },

  }
}
</script>
<style lang="less" scoped>
.morning-container {
  .morning-users-img {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    img {
      width: 16px;
    }
    .title {
      color: #333;
      font-size: 16px;
      margin-left: 6px;
    }
  }
  .morning-users-list {
    .zxy {
      display: flex;
      align-items: flex-start;
      .info-tc {
        margin-left: 10px;
      }
      .info-desc {
        margin-bottom: 4px;
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
    .users-list-item {
      background: #FFFFFF;
      box-shadow: 0 2px 4px 1px #f3f7fa;
      border-radius: 6px;
      margin: 0 8px 6px;
      padding: 16px;
      .img-user {
        width: 40px;
      }
      .info-detail {
        margin-bottom: 8px;
      }
      .info-phone {
        color: 333;
        margin-right: 16px;
      }
      .info-time {
        border: 1px solid #4D98FF;
        border-radius: 3px 8px 3px 8px;
        color: #4D98FF;
        font-size: 12px;
        padding: 0 6px;
      }
      .info-desc {
        font-size: 12px;
        color: #666;
      }
      .item-value {
        color: #FD806E;
      }
    }
  }
}
/deep/ .van-loading {
  text-align: center;
  padding: 40px 0;
}
</style>